<template>
    <footer class="bg-gray-100 dark:bg-gray-800 mt-12 py-6">
        <div class="container mx-auto px-4">
            <div
                class="flex flex-col md:flex-row justify-between items-center border-t border-gray-200 dark:border-gray-700 pt-6">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <p class="text-gray-600 dark:text-gray-300">
                        © 2024 DEFENG BLOG - 基于Vue3技术构建
                    </p>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                        MIT License
                    </p>
                </div>

                <div class="flex space-x-6">
                    <a v-for="(link, index) in socialLinks" :key="index" :href="link.url"
                        class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition-colors"
                        target="_blank" rel="noopener">
                        {{ link.name }}
                    </a>
                </div>
            </div>

            <slot></slot>
        </div>
    </footer>
</template>

<script setup lang="ts">
const socialLinks = [
    { name: 'GitHub', url: 'https://github.com' },
    { name: 'Twitter', url: 'https://twitter.com' },
    { name: '掘金', url: 'https://juejin.cn' }
]
</script>

<style scoped>
footer {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark footer {
    box-shadow: 0 -4px 6px -1px rgba(255, 255, 255, 0.1);
}
</style>